<template> 
  <div id="header">
    <div class="header-left flex-box">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diary-sousuo"></use>
      </svg>
    </div>
    <div class="header-nav">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide class="flex-box"><p><router-link to="/GuanZhu">关注</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/">深度好文</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/SheHui">社会</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/JiaTing">家庭</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/RenWen">人文</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/GanQing">感情</router-link></p></swiper-slide>
        <swiper-slide class="flex-box"><p><router-link to="/LiShi">历史</router-link></p></swiper-slide>
      </swiper>
    </div>
    <div class="header-right flex-box">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diary-fenlei"></use>
      </svg>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "Header",
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        freeMode: true,
        // initialSlide :1,
        // centeredSlides: true,
        autoHeight: true,
        resistanceRatio: 0, // 禁止边缘抵抗
        touchAction: "none",
        watchSlidesProgress: true,
        mousewheel: false,
        slideToClickedSlide: true,
        on: {
          init: function() {
            // console.log(this.$store);
            this.slides.removeClass("slide_active");
            this.slides.eq(1).addClass("slide_active");
          },
          tap: () => {
            this.swiperHeader.slides.removeClass("slide_active");
            this.swiperHeader.slides
              .eq(this.swiperHeader.clickedIndex)
              .addClass("slide_active");
            this.swiperHeader.slideTo(
              this.swiperHeader.clickedIndex - 2,
              1000,
              false
            );
          }
        }
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiperHeader() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {},
  watch: {
    $route() {
      // console.log(this.$store.state.pageNum);
      this.swiperHeader.slides.removeClass("slide_active");
      this.swiperHeader.slides
        .eq(this.$store.state.pageNum)
        .addClass("slide_active");
      this.swiperHeader.slideTo(this.$store.state.pageNum - 2, 1000, false);
    }
  },
  mounted() {
    this.swiperHeader.slides.removeClass("slide_active");
    this.swiperHeader.slides
      .eq(this.$store.state.pageNum)
      .addClass("slide_active");
    this.swiperHeader.slideTo(this.$store.state.pageNum - 2, 1000, false);
  }
};
</script>
<style lang="scss" scoped>
#header {
  width: 100%;
  height: r(90);
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.06);
  z-index: 999;
  .swiper-container {
    width: 100%;
    height: 100%;
    background: #fff;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        height: r(90);
        font-size: r(32);
        width: auto;
        box-sizing: border-box;
        @include setPm(padding, 10, 24, 0, 24);
        p {
          width: 100%;
          height: 100%;
          display: inline-block;
          padding-top: r(24);
          box-sizing: border-box;
          border-bottom: 4px solid #fff;
          a {
            width: 100%;
            height: 100%;
            color: #aaa;
          }
        }
      }
      .slide_active {
        p {
          width: 100%;
          height: 100%;
          color: #333;
          display: inline-block;
          padding-top: r(24);
          box-sizing: border-box;
          border-bottom: 4px solid #88ddf2;
          a {
            width: 100%;
            height: 100%;
            color: #333;
          }
        }
      }
      // .swiper-slide-active {
      //   color: #333;
      //   border-bottom: 4px solid #88ddf2;
      // }
    }
  }
  .header-left {
    width: r(110);
    height: 100%;
    background: #fff;
    font-size: r(48);
    color: #666;
    position: absolute;
    z-index: 66;
    box-shadow: 8px -2px 8px rgba($color: #fff, $alpha: 1);
    left: 0;
    top: 0;
  }
  .header-nav {
    height: 100%;
    margin-left: r(110);
    margin-right: r(110);
  }
  .header-right {
    width: r(110);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 66;
    box-shadow: -8px -2px 8px rgba($color: #fff, $alpha: 1);
    font-size: r(48);
    color: #666;
  }
}
</style>
